<!--验证码组件-->
<template>
    <div class="vertify-box">
        <div class="vertify">
            <el-input v-model="vertifyCode" type="text" placeholder="请输入验证码" @blur="onBlur"></el-input>
        </div>
        <div class="vertify-position">
            <input v-model="checkCode" type="button" @click="createCode">
        </div>
    </div>
</template>
<script>
import '@/assets/queryPublic.css'
export default {
    data() {
        return {
            vertifyCode: '',
            checkCode: ''
        }
    },
    created() {
        this.createCode()
    },
    methods: {
        onBlur() {
            if (this.checkCode != this.vertifyCode) {
                this.$message.error('验证码输入有误')
                this.createCode()
                this.$emit('verification',false)
            }else{
                this.$emit('verification',true)
            }
        },
        /**
         * @description: 创建验证码
         * @param {*}
         * @return {*}
         */
        createCode() {
            // 先清空验证码的输入
            let code = ''
            this.checkCode = ''
            this.vertifyCode = ''
            // 验证码的长度
            const codeLength = 4
            // 随机数
            const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
            for (let i = 0; i < codeLength; i++) {
                // 取得随机数的索引（0~35）
                const index = Math.floor(Math.random() * 36)
                // 根据索引取得随机数加到code上
                code += random[index]
            }
            // 把code值赋给验证码
            this.checkCode = code
        },
    }
}
</script>
<style lang="scss" scoped>
.vertify-box {
    display: flex;
    justify-content: flex-start;
    width: 350px;
    height: 50px;

    .vertify {
        margin-right: 5px;
        width: 203px !important;
        height: 46px;
        line-height: 46px;
        display: flex;
    }

    .vertify-position {
        width: 93px;
        height: 30px;

        input {
            user-select: none;
            margin-top: 7px;
            width: 100%;
            height: 100%;
            border: 1px solid #00ffb3;
            background: rgba(0, 229, 255, 0.1);
            font-family: 'Microsoft YaHei';
            font-style: italic;
            color: #00ffb3;
            padding: 0 17px;
            letter-spacing: 2px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
        }
    }

    ::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: #ddd;
    }
}
</style>